<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="perms"
      :pagination="false"
      :row-selection="{ selectedRowKeys, onChange }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'btns' && record.menuButtons.length">
          <a-select
            v-model:value="record.checkedBtns"
            mode="multiple"
            style="width: 100%"
            placeholder="Please select"
            :options="record.menuButtons"
          ></a-select>
          <!-- @change="handleChange" -->
        </template>
      </template>
    </a-table>
    <div class="flex justify-end">
      <a-button @click="onSubmit" type="primary" class="mt-6">提交</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';
const columns = [
  {
    title: '页面键值',
    dataIndex: 'cKey',
    key: 'cKey',
    width: 200,
  },
  {
    title: '页面',
    dataIndex: 'cName',
    key: 'cName',
    width: 160,
  },
  {
    title: '操作按钮',
    dataIndex: 'btns',
    key: 'btns',
  },
];

interface DataItem {
  cKey: string;
  cName: string;
  check: boolean;
  btns: [];
}

export default defineComponent({
  setup(props, { emit }) {
    const perms = ref([]);
    const selectedRowKeys = ref([]);

    function onChange(keys: (string | number)[], selectedRows: DataItem[]) {
      selectedRowKeys.value = keys;
      console.log(keys);
    }

    let user_id = null;
    function init(uid) {
      reset();
      user_id = uid;
      defHttp.get({ url: '/User/get-permis-menu', params: { uid } }).then((res) => {
        perms.value = Object.values(res.data).map((item) => {
          item.key = item.cKey;
          if (item.check) {
            selectedRowKeys.value.push(item.key);
          }
          console.log(Object.keys(item.menuButtons));
          item.menuButtons = Object.values(item.menuButtons).map((btn) => {
            return {
              value: btn.id,
              label: btn.name,
              check: btn.check,
            };
          });
          item.checkedBtns = item.menuButtons.filter((btn) => btn.check).map((item) => item.value);
          return item;
        });
      });
    }

    function onSubmit() {
      let menu = perms.value
        .filter((item) => selectedRowKeys.value.includes(item.key))
        .map((item) => {
          return {
            uId: user_id,
            mId: item.id,
            userButtons: item.checkedBtns.map((btn_id) => {
              return {
                uId: user_id,
                mId: item.id,
                bId: btn_id,
              };
            }),
          };
        });
      console.log(menu);
      defHttp.post({ url: `/User/bind-menu?uid=${user_id}`, params: menu }).then((res) => {
        message.success('操作成功');

        emit('finished');
      });
    }

    function reset() {
      user_id = null;
      perms.value = [];
      selectedRowKeys.value = [];
    }
    return {
      perms,
      columns,
      init,
      onChange,
      selectedRowKeys,
      onSubmit,
    };
  },
});
</script>

